<template>
	<view class="liquorCardList">
		<n-loading></n-loading>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FF5238" :bold="false"
		 inactive-color="#666666" class="tabs"></u-tabs>
		 <view>
			 <view class="cardBox" v-if="current==0">
				<view class="cardNo" v-if="cardList.length==0">
					<image src="../../static/svgIcon/noCard.svg" mode=""></image>
					<view class="tips">您还没有酒卡请前去获取酒卡~</view>
					<view class="getCardBtn" @tap="goHome">获取酒卡</view>
				</view>
				
				 <view  class="liquorCardEach" v-for="(item,index) of cardList" :key="index">
					<!-- <image class="liquorCardEachBj" :src="item.liquor_cate.image"></image> -->
					<image class="liquorCardEachBj" :src="(item.spec).indexOf('500')!=-1?'https://lovebirdopen.com/static/img/cardStrategy/popCardAll500.png':'https://lovebirdopen.com/static/img/cardStrategy/popCardAll125.png'"></image>
					<view class="liquorCardEachCont2">
						<view class="worth" :class="{worthColor1:(item.spec).indexOf('500')!=-1,worthColor2:(item.spec).indexOf('125')!=-1}">
							价值￥{{item.product_price*item.num}}<text>存酒得高粱穗</text>
						</view>
						
						<view class="cardTit" :class="{color1:(item.spec).indexOf('500')!=-1,color2:(item.spec).indexOf('125')!=-1}">{{item.card_name}}</view>
						<view class="time mb56" :class="{color3:(item.spec).indexOf('500')!=-1,color4:(item.spec).indexOf('125')!=-1}">{{item.time}}</view>
						<view class="time sTime" :class="{color3:(item.spec).indexOf('500')!=-1,color4:(item.spec).indexOf('125')!=-1}">
							<view class="info ellipsis">{{item.description}}</view>
							<text>×{{item.num}}</text>
						</view>
						<!-- 未冻结的 -->
						<view class="cardHandle" v-if="item.freezes!=1">
							<view class="handleEach" :class="{handleEach11:(item.spec).indexOf('500')!=-1,handleEach21:(item.spec).indexOf('125')!=-1}" @tap="shareGo(item.id,item.name,item.image,index)" v-if="item.given==null">
								<view class="handleBox">
									<image :src="(item.spec).indexOf('500')!=-1?'../../static/img/share3.svg':'../../static/img/share4.svg'" mode=""></image>
									<text class="btnName1">赠送</text>
								</view>
							</view>
							<view class="handleEach handleEach2" :class="{handleEach12:(item.spec).indexOf('500')!=-1,handleEach22:(item.spec).indexOf('125')!=-1}">
								<view class="handleBox" @tap="seeCardInfo(1,item.id)">
									<image :src="(item.spec).indexOf('500')!=-1?'../../static/img/QRcode1.svg':'../../static/img/QRcode2.svg'" mode=""></image>
									<text>立即提货</text>
								</view>
							</view>
						</view>
						<!-- 已冻结的 -->
						<view class="cardHandle" v-if="item.freezes==1">
							<view class="handleEach" :class="{handleEach11:(item.spec).indexOf('500')!=-1,handleEach21:(item.spec).indexOf('125')!=-1}" v-if="item.given==null">
								<view class="handleBox" @tap="inoperable('赠送')">
									<image :src="(item.spec).indexOf('500')!=-1?'../../static/img/share3.svg':'../../static/img/share4.svg'" mode=""></image>
									<text class="btnName1">赠送</text>
								</view>
							</view>
							<view class="handleEach handleEach2" :class="{handleEach12:(item.spec).indexOf('500')!=-1,handleEach22:(item.spec).indexOf('125')!=-1}">
								<view class="handleBox" @tap="inoperable('提货')">
									<image :src="(item.spec).indexOf('500')!=-1?'../../static/img/QRcode1.svg':'../../static/img/QRcode2.svg'" mode=""></image>
									<text>立即提货</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 已冻结提示 -->
					<view class="freezeUp" :style="{color:(item.spec).indexOf('500')!=-1?'#EAC181':'#B97300'}" v-if="item.freezes==1">
						<u-icon name="lock" :color="(item.spec).indexOf('500')!=-1?'#EAC181':'#B97300'" size="32"></u-icon>
						酒卡已冻结
					</view>
				 </view>
			 </view>
			 <view class="cardBox" v-if="current==1">
				 <view class="cardNo" v-if="cardList.length==0">
					<image src="../../static/svgIcon/noCard.svg" mode=""></image>
					<view class="tips">您还没有已使用的酒卡~</view>
				 </view>
				 <view class="liquorCardEach" v-for="(item,index) of cardList" :key="index">
					<image class="liquorCardEachBj" :src="(item.spec).indexOf('500')!=-1?'https://lovebirdopen.com/static/img/cardStrategy/popCardEd500.png':'https://lovebirdopen.com/static/img/cardStrategy/popCardEd125.png'"></image>
					<view class="liquorCardEachCont2">
						<view class="worth worth1">
							价值￥{{item.product_price}}
						</view>
						
						<view class="cardTit cardTit1">{{item.card_name}}</view>
						<view class="time time1 mb56" >{{item.time}}</view>
						<view class="time time1 sTime">
							<view class="info ellipsis">{{item.description}}</view><text>×{{item.num}}</text>
						</view>
						<view class="cardHandleIn" v-if="item.num==0">{{getdate(item.given_at,1)}}<text>已赠送</text></view>
						<view class="cardHandleIn" v-if="item.ispickup==1">{{getdate(item.pickup_at,1)}}<text>已提货</text></view>
						<view class="cardHandleIn" v-if="item.online==1">{{getdate(item.online_at,1)}}<text>转线上</text></view>
						<view class="cardHandleIn" v-if="item.refund==1">{{getdate(item.refund_at,1)}}<text>已退卡</text></view>
					</view>
				 </view>
			 </view>
		 </view>
		 
		 <!-- 分享 -->
		 <u-popup v-model="shareWayShow" mode="bottom" border-radius="16">
		 	<view class="shareWaysBox">
		 		<view class="shareWays">
		 			<view class="shareWaysEach">
		 				<button class="shareFriendsBtn" open-type="share" :plain="true" @click="cancelShare">
		 					<view class="shareWaysEachIcon">
		 						<u-icon name="weixin-fill" color="#2DC100" size="48"></u-icon>
		 					</view>
		 					<view class="tit">微信好友分享</view>
		 				</button>
		 			</view>
		 			<view class="shareWaysEach" @tap="generateGo">
		 				<view class="shareWaysEachIcon">
		 					<u-icon name="photo-fill" color="#666666" size="48"></u-icon>
		 				</view>
		 				<view class="tit">生成海报</view>
		 			</view>
		 		</view>
		 		<!-- 取消 -->
		 		<view class="cancel" @tap="cancelShare">取消</view>
		 	</view>
		 </u-popup>
		 <u-popup v-model="painterShow" mode="bottom" border-radius="16">
		 	<view class="goodsPainter">
		 		<image :src="posterPath" mode="" v-if="posterPath!=''"></image>
		 	</view>
		 	<view class="savePainter">
		 		<view class="saveBtn" @tap="savePoster">保存图片</view>
		 	</view>
		 </u-popup>
		 
		 <view class="painterCans">
		 	<lime-painter :board="cardPosterNew" v-if="isGenerate==1" :isRenderImage="true" @success="posterPath = $event" @fail=""></lime-painter>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				offset:1,//页码
				pickup_all:0,//0--未使用 1--已使用
				url:'/api/user/moreTableList', //接口地址
				list: [{
					name: '待使用'
				}, {
					name: '已使用'
				}],
				current:0,
				cardList:[],
				cardListReady:null,
				isLoadMore:false,
				typeVal:0,
				page: 1,
				pageSize: 20,
				// 分享
				giveCardId:'',
				giveCardImg:'',
				giveCardName:'',
				giveCardVal:'',
				shareWayShow: false,
				painterShow: false,
				invitationCode:'',
				isGenerate:0,
				cardPosterNew:{
					width: "750rpx",
					height: "1100rpx",
					background: "",
					views: [
						{
							type: "image",
							url: "https://lovebirdopen.com/static/img/poster/cardPosterNewBj1.png",
							css: {
								width: "750rpx",
								height: "1100rpx",
								left: "0rpx",
								top: "0rpx",
								mode: "center",
								radius: ''
							}
						},
						{
							type: "image",
							url: "https://lovebirdopen.com/static/img/poster/cardPosterNewBj2.png",
							css: {
								width: "640rpx",
								height: "826rpx",
								background:'transparent',
								left: "56rpx",
								top: "136rpx",
								mode: "center",
								radius: ''
							}
						},
						{//2用户头像
							type: "image",
							url: "",
							css: {
								width: "48rpx",
								height: "48rpx",
								left: "124rpx",
								top: "224rpx",
								mode: "center",
								radius: '50%'
							}
						},
						{//3用户名称
							type: 'text',
							text: '',
							css: {
								width: '440rpx',
								maxLines: 1,
								color: '#7B5D34',
								left: '188rpx',
								top: '224rpx',
								fontSize: '32rpx',
								lineHeight: '48rpx',
								textAlign: 'left'
							}
						},
						{//4酒卡
							type: "image",
							url: "",
							css: {
								width: "524rpx",
								height: "300rpx",
								background:'transparent',
								left: "114rpx",
								top: "300rpx",
								mode: "center",
								radius: ''
							}
						},
						{//5酒卡名称及类型
							type: 'text',
							text: '',
							css: {
								width: '295rpx',
								maxLines: 1,
								color: '',
								left: '154rpx',
								top: '340rpx',
								fontSize: '36rpx',
								lineHeight: '52rpx'
								// textAlign: 'center'
							}
						},
						{//6时间
							type: 'text',
							text: '',
							css: {
								width: '288rpx',
								maxLines: 1,
								color: '',
								left: '154rpx',
								top: '392rpx',
								fontSize: '24rpx',
								lineHeight: '40rpx'
								// textAlign: 'center'
							}
						},
						{//7商品名称
							type: 'text',
							text: '',
							css: {
								width: '320rpx',
								maxLines: 1,
								color: '',
								left: '154rpx',
								top: '488rpx',
								fontSize: '24rpx',
								lineHeight: '40rpx'
								// textAlign: 'center'
							}
						},
						{
							type: "image",
							url: "https://lovebirdopen.com/static/img/poster/cardPosterNewBj3.png",
							css: {
								width: "640rpx",
								height: "290rpx",
								background:'transparent',
								left: "56rpx",
								top: "674rpx",
								mode: "center"
							}
						},
						{//9小程序码
							type: "image",
							url: "",
							css: {
								width: "160rpx",
								height: "160rpx",
								left: "296rpx",
								top: "730rpx",
								mode: "center",
								radius: '50%'
							}
						},
						{
							type: "image",
							url: "https://lovebirdopen.com/static/img/poster/cd1.png",
							css: {
								width: "162rpx",
								height: "172rpx",
								background:'transparent',
								left: "20rpx",
								top: "112rpx",
								mode: "center"
							}
						},
						{
							type: "image",
							url: "https://lovebirdopen.com/static/img/poster/cd1.png",
							css: {
								width: "194rpx",
								height: "244rpx",
								background:'transparent',
								left: "558rpx",
								top: "808rpx",
								mode: "center"
							}
						}
					]
				},
				posterPath: '',
			}
		},
		onLoad: function (option) {
			// this.getCardList();
			// this.isGenerate = 0;
			if (!uni.getStorageSync('userInfo')) {
				//用户登录
				this.login();
			} else {
				//调用默认启动方法
				this.loadData();
			}
		},
		onPullDownRefresh() {
			this.cardListReady = null;
			this.offset = 1;
			this.cardList = [];
			this.loadData()();
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 2000);
		},
		// 滑动到底部
		onReachBottom() {
			if(!this.isLoadMore){
				// this.getCardList()
				this.loadData()
			}
		},
		methods: {
			//---------------------------通用方法调用
			loadData() {
				this.get_cardData();//获取酒卡数据
			},
			
			//--------------------单表查询案例
			   async get_cardData() {
			    let url = '/api/user/listData'; //接口地址
			    let param = {};
			    param.table = 'liquor_card';//表名称
			    param.listType = 3; //分页获取商品数据 1单条  2全部  3分页
				param.offset=this.offset;// 页码数 默认1
				param.limit=10;//每页显示的数量 默认10
			    param.db = 1; //0获取缓存数据  1 获取非缓存数据  默认0
			    param.dbNum = ''; //缓存编号   API默认以MD5(param)为编号
				param.where={'a.pickup_all':this.pickup_all};//查询条件字段名称 无给个空值
			    param.field = 'a.*,b.*,c.description,c.image as card_image,c.font_color,c.name as card_name'; //联表查询返回记录合并记录
			    param.join =[['card_relation b','a.product_id=b.object_id'],['card c','b.card_id=c.id']] ; //联表查询返回记录合并记录
			    const res = await this.$fly.post(url, {
			     msg: JSON.stringify(param)
			    });
			    if (res.code == 200) {
					res.data.forEach(item=>{
						if(item.user_id==item.buy_user_id){
							item.time=this.fmtDate2(item.created_at)
						}else{
							item.time=this.fmtDate2(item.updated_at)
						}
					})
					this.cardList = res.data
					console.log(res.data);
			    } else {
					console.log(res);
			    }
			   },
			
			getCardList(){
				this.apiget('/mall/liquor-card/index',{page:this.page,pageSize:this.pageSize,status:this.typeVal}).then(res =>{
					if(res.data.status == 200 ) {
						this.cardList = this.cardList.concat(res.data.data.list);
						this.cardListReady = 1;
						if(res.data.data.list.length<this.pageSize){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else if(res.data.data.list.length==this.pageSize && this.page == res.data.data.pageCount){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else{
							this.status = 'loading';
							this.page = ++ this.page;
						}
					}
				})
			},
			change(index){
				this.cardListReady = null;
				this.current = index;
				if(index==0){
					// this.typeVal = "0";
					this.pickup_all=0
				}else{
					// this.typeVal = "1";
					this.pickup_all=1
				}
				this.cardList = [];
				this.offset = 1;
				this.loadData();
			},
			seeCardInfo(type,id){
				uni.navigateTo({
					url:"../scanCode/liquorCardInfo?id="+id+"&type="+type
				})
			},
			// 冻结卡不能操作提示
			inoperable(text){
				uni.showToast({
					title: '该酒卡已冻结，不能进行'+text,
					icon: 'none',
					duration: 2000
				})
			},
			goHome(){
				uni.reLaunch({
				    url: '../index?barCur=0'
				});
			},
			getLogonUser() {
				this.apiget('/fun/member/view', {}).then(res => {
					if (res.data.status == 200) {
						this.cardPosterNew.views[2].url = res.data.data.avatar;
						this.cardPosterNew.views[3].text = '好友“'+res.data.data.nickname+'”送你一张酒卡';
						this.invitationCode = res.data.data.invitation_code;
						// 获取小程序码
						this.gerWxCode();
					}
				})
			},
			gerWxCode(){
				var _this = this;
				this.apipost('/wxxcx/get-wx-code', {page:'pages/index',scene:'card='+this.giveCardVal+'&ref='+this.invitationCode,width:280,is_hyaline:1}).then(res => {
					if (res.data.status == 200) {
						this.cardPosterNew.views[9].url = res.data.data;
						this.isGenerate = 1;
					}
				})
			},
			// 分享
			cancelShare() {
				this.shareWayShow = false;
			},
			// 分享按钮
			shareGo(id,name,img,index) {
				this.cardPosterNew.views[4].url = (this.cardList[index].specs).indexOf('500')!=-1?'https://lovebirdopen.com/static/img/poster/cardPoster500.png':'https://lovebirdopen.com/static/img/poster/cardPoster125.png';
				this.cardPosterNew.views[5].text = this.cardList[index].liquor_cate.name+this.cardList[index].liquor_cate.description;
				this.cardPosterNew.views[5].css.color = (this.cardList[index].specs).indexOf('500')!=-1?'#EAC181':'#B97300';
				this.cardPosterNew.views[6].text = this.getdate(this.cardList[index].created_at,1);
				this.cardPosterNew.views[6].css.color = (this.cardList[index].specs).indexOf('500')!=-1?'rgba(234, 193, 129, 0.7)':'rgba(185, 115, 0, 0.7)';
				this.cardPosterNew.views[7].text = this.cardList[index].name;
				this.cardPosterNew.views[7].css.color = (this.cardList[index].specs).indexOf('500')!=-1?'rgba(234, 193, 129, 0.7)':'rgba(185, 115, 0, 0.7)';
				this.giveCardId = id;
				this.giveCardImg = img;
				this.giveCardName = name;
				this.apipost('/mall/liquor-card/update',{given_at:1,id:id}).then(res =>{
					if(res.data.status == 200 ) {
						this.giveCardVal = res.data.data.card;
						this.shareWayShow = true;
						this.getLogonUser();
					}
				})
			},
			// 生成海报
			generateGo() {
				this.showLoadGo(true);
				var _this = this;
				_this.painterShow = true;
				_this.shareWayShow = false;
				if(this.posterPath!=''){
					this.showLoadGo(false);
				}
			},
			savePoster() {
				var _this = this;
				uni.saveImageToPhotosAlbum({
					filePath: this.posterPath,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000,
							success: function() {
								_this.painterShow = false
							}
						})
					}
				})
			},
		},
		onShareAppMessage(res) {
			var _this = this;
			return {
				title: _this.giveCardName,
				path: 'pages/index?card='+_this.giveCardVal+'&ref='+_this.invitationCode,
				imageUrl: _this.giveCardImg
			}
			_this.shareWayShow = false;
			if (res.from === 'button') { // 来自页面内分享按钮
				uni.showToast({
					title: '已发送',
					icon: 'success',
					duration: 2000,
					success: function() {}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabs {
		position: fixed;
		// #ifndef MP-WEIXIN
		top: 80rpx;
		// #endif
		// #ifdef MP-WEIXIN
		top: 0;
		// #endif
		left: 0;
		right: 0;
		z-index: 20;
	}
	.liquorCardList{
		// padding: 104rpx 32rpx 90rpx;
		padding: 100rpx 0 32rpx;
		min-height:100%;
		background-color: #F8F8FA;
	}
	.cardBox{
		padding: 0 32rpx;
	}
	
	.liquorCardEach{
		position: relative;
		width: 100%;
		// height: 368rpx;
		margin-bottom: 16rpx;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.04);
		border-radius: 8rpx;
		overflow: hidden;
		
		.liquorCardEachBj{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
		
		.liquorCardEachCont2{
			height: 352rpx;
			padding: 40rpx 40rpx 0;
			overflow: hidden;
			position: relative;
			z-index: 2;
						
			.worth{
				position: absolute;
				right: 0;
				top: 0;
				width: 356rpx;
				height: 57rpx;
				padding-left: 45rpx;
				font-size: 24rpx;
				line-height: 57rpx;
				text-align: center;
			}
			
			.worth1{
				width: 233rpx;
				color: #E8E8E8;
			}
			.worthColor1{
				color: #755F3C;
				
				text{
					margin-left: 8rpx;
					color: rgba(117, 95, 60, 0.7);
				}
			}
			.worthColor2{
				color: #FFE6A6;
				
				text{
					margin-left: 8rpx;
					color: rgba(255, 230, 166, 0.7);
				}
			}
			
			.cardTit{
				height: 52rpx;
				font-size: 36rpx;
				line-height: 52rpx;
			}
			
			.cardTit1{
				color: #666666;
			}
			
			.time{
				width: 70%;
				// margin-bottom: 56rpx;
				font-size: 24rpx;
				line-height: 40rpx;
			}
			.time1{
				color: rgba(102, 102, 102, 0.7);
			}
			
			.sTime{
				display: flex;
				
				.info{
					flex: 1;
					width: 1px;
				}
				text{
					margin-left: 8rpx;
					opacity: 1;
				}
			}
			.mb56{
				margin-bottom: 56rpx;
			}
			
			.cardHandle{
				margin-top: 42rpx;
				text-align: right;
				
				.handleEach{
					display: inline-block;
					height: 56rpx;
					line-height: 56rpx;
					font-size: 24rpx;
					text-align: center;
					
					.handleBox{
						display: flex;
						align-items: center;
						justify-content: center;
						
						image{
							display: inline-block;
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
							vertical-align:middle
						}
					}
				}
				.handleEach11{
					width: 136rpx;
					border: 2rpx solid #755F3C;
					box-sizing: border-box;
					border-radius: 56rpx;
					color: #EAC181;
				}
				.handleEach12{
					width: 184rpx;
					margin-left: 32rpx;
					border-radius: 50rpx;
					background: #EAC181;
					color: #755F3C;
				}
				.handleEach21{
					width: 136rpx;
					border: 1px solid rgba(185, 115, 0, 0.7);
					box-sizing: border-box;
					border-radius: 56rpx;
					color: #B97300;
				}
				.handleEach22{
					width: 184rpx;
					margin-left: 32rpx;
					border-radius: 50rpx;
					background: #CC922D;
					color: #FFE6A6;
					border: 1px solid #FFE6A6;
				}
			}
			
			.cardHandleIn{
				height: 84rpx;
				margin-top: 28rpx;
				font-size: 28rpx;
				line-height: 84rpx;
				color: #666666;
				background: rgba(0, 0, 0, 0.02);
				
				text{
					float: right;
				}
			}
			.color1{
				color: #EAC181;
			}
			.color2{
				color: #B97300;
			}
			.color3{
				color: rgba(234, 193, 129, 0.7);
			}
			.color4{
				color: rgba(185, 115, 0, 0.7);
			}
		}
			
		.freezeUp{
			position: absolute;
			bottom: 24rpx;
			left: 30rpx;
			z-index: 2;
			font-size: 28rpx;
			line-height: 44rpx;
			
			u-icon{
				margin-right: 8rpx;
			}
		}
	}
	
	.cardNo{
		padding-top: 100rpx;
		text-align: center;
		
		image{
			display: inline-block;
			width: 336rpx;
			height: 336rpx;
		}
		
		.tips{
			font-size: 28rpx;
			line-height: 44rpx;
		}
		
		.getCardBtn{
			display: inline-block;
			width: 208rpx;
			height: 80rpx;
			margin-top: 64rpx;
			font-size: 32rpx;
			line-height: 80rpx;
			color: #fff;
			background: #FF5238;
			box-shadow: 0px 4rpx 8rpx rgba(255, 82, 56, 0.18);
			border-radius: 58rpx;
		}
	}
	
	
	
	//分享方式
	.shareWaysBox {
		padding: 64rpx 32rpx;
	
		.shareWays {
			display: flex;
			padding-bottom: 60rpx;
			text-align: center;
	
			.shareWaysEach {
				flex: 1;
	
				.shareFriendsBtn {
					border: none;
				}
	
				.shareWaysEachIcon {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 112rpx;
					width: 112rpx;
					margin: 0 auto;
					background: #F7F7F7;
					border-radius: 8rpx;
				}
	
				.tit {
					margin-top: 16rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #999999;
				}
			}
		}
	
		.cancel {
			height: 96rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			text-align: center;
			color: #333;
			background: #F7F7F7;
			border-radius: 48px;
		}
	}
	
	
	.goodsPainter {
		width: 460rpx;
		height: 900rpx;
		padding: 112rpx 0;
		margin: 0 auto;
		
		image{
			width: 460rpx;
			height: 674rpx;
		}
	}
	
	
	.painterCans {
		position: fixed;
		left: -800rpx;
		width: 640rpx;
		height: 1028rpx;
	}
	
	.savePainter {
		margin-top: 20rpx;
		padding: 0 32rpx 30rpx;
	
		.saveBtn {
			height: 96rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			color: #fff;
			text-align: center;
			background: #FF5238;
			box-shadow: 0px 4rpx 8rpx rgba(255, 82, 56, 0.18);
			border-radius: 48rpx;
		}
	}
</style>
